<template>
  <div class="about">
    <x-header>关于我们</x-header>
    <div class="about-box">
      <img class="about-img" src="../../../static/lai.png" alt="">
      <span class="bangben">V1.0</span>
      <span class="about-desc">“来人呐”是一款旨在服务在校大学生群体的APP，为同学们提供一个信息交流，资源共享的平台。“来人呐”APP以校园论坛和校园跑腿服务为核心，依托于社群，衍生出各种商业模式，为在校大学生满足衣食住行等各方面的需求。</span>
    </div>
    <group>
      <cell v-for="(item,i) in list" :value="item.value" :key="i" :title="item.name" :link="item.link" is-link></cell>
    </group>
    <div class="about-foot">Copyright&copy;2018 学大经财</div>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import {
  XHeader,
  Group,
  Cell
} from 'vux';

@Component({
  components: {
    XHeader,
    Group,
    Cell
  }
})
export default class About extends Vue {
  list = [
    { name: '检测新版本', value: 'V1.0', link: '/serviceAgreement' },
    { name: '给我们打个分吧', value: '', link: '/neederAgreement' },
    { name: '条款条例', value: '', link: '/agreement' }
  ]
}
</script>
<style lang="less">
  .about {
    padding-top: 46px;
    width: 100%;
    height: 100%;
    padding-top: 46px;
    .weui-cells {
      margin-top: 0;
    }
    .about-box {
      padding: 20px 10px;
      display: flex;
      align-items: center;
      justify-items: center;
      flex-direction: column;
    }
    .bangben {
      padding-top: 5px;
      padding-bottom: 15px;
      color: #666666;
    }
    .about-desc {
      color: #666666;
      font-size: 12px;
    }
    .about-img {
      width: 80px;
      height: 80px;
    }
    .about-foot {
      width: 100%;
      line-height: 24px;
      text-align: center;
      position: fixed;
      bottom: 0;
      font-size: 12px;
      color: #999999;
    }
  }
</style>
